<template>
  <div class="keywords">
    <NavbarIndex />
    <b-container>
      <!-- <b-breadcrumb :items="items" class="mt-3" /> -->
      <b-row>
        <div class="col-md-12 col-lg-8 col-xl-2">
          <div class="list-group text-center d-none d-xl-block" v-for="(item, index) in catList" :key="index + '_a'">
            <template v-if="item.id == pid || item.id == catId">
              <div class="list-group-item list-group-item-action active">相关频道</div>
              <router-link :to="'/list/' + item.id +'/' + item.pid" v-for="(item, index) in item._child" :key="index + '_b'" class="list-group-item list-group-item-action">{{item.title}}</router-link>
            </template>
          </div>
          <div class="d-xl-none" v-for="(item, index) in catList" :key="index">
            <template v-if="item.id == pid || item.id == catId">
              <router-link :to="'/list/' + item.id +'/' + item.pid" v-for="(item, index) in item._child" :key="index  + '_c'" class="btn btn-link btn-md">{{item.title}}</router-link>
            </template>
          </div>
        </div>
        <div class="col-md-12 col-lg-8 col-xl-6">
          <router-link v-for="item in newsList" :key="item.id" :to="'/show/'+ item.id" :title="item.title">
            <div class="text-left py-2 border-bottom">
              <h5 class="mt-0 text-dark">{{item.title}}</h5>
              <b-media>
                <img slot="aside" width="120" height="90" v-lazy="domain+item.thumb" :alt="item.title" v-if="item.thumb" :key="item.thumb" />
                <small class="text-muted">{{item.inputtime}}</small>
                <p class="text-truncate-3 mb-0 text-muted">{{item.description}}</p>
              </b-media>
            </div>
          </router-link>
          <infinite-loading :identifier="infiniteId + '_f'" @infinite="infiniteHandler"></infinite-loading>
        </div>
        <div class="col-md-12 col-lg-4 col-xl-4">
          <MallList />
        </div>
      </b-row>
    </b-container>
    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import NavbarIndex from "@/components/NavbarIndex.vue";
import FooterIndex from "@/components/FooterIndex.vue";
import MallList from "@/components/MallList.vue";
import InfiniteLoading from "vue-infinite-loading";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "keywords",
  components: {
    NavbarIndex,
    InfiniteLoading,
    FooterIndex,
    MallList
  },
  data: function () {
    return { domain: process.env.VUE_APP_baseURL }
  },
  created () {
    this.newsListInit(this.catId);
    let i = 6
    if (1 < i && i < 3) {
      console.log('yes')
    } else {
      console.log('no')
    }
  },
  computed: {
    catId () {
      return this.$route.params.id;
    },
    infiniteId () {
      return this.$route.params.id;
    },
    pid () {
      return this.$route.params.pid;
    },
    ...mapState({
      catList: state => state.cat.catList,
      newsList: state => state.news.newsList
    }),
  },
  watch: {
    $route () {
      // 监听路由是否变化
      if (this.$route.params.id) {
        //判断id是否有值
        this.newsListInit(this.$route.params.id);
      }
    }
  },
  methods: {
    infiniteHandler ($state) {
      this.changeNewsList(this.catId).then(function (ret) {
        if (ret == 1) {
          $state.loaded();
        } else {
          $state.complete();
        }
      })
    },
    ...mapActions('news', ["changeNewsList"]),
    ...mapMutations('news', ["newsListInit"])
  }
};
</script>

<style scoped>
.text-truncate-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.list-group-item-action:hover {
  color: #007bff;
}
.list-group-item-action.active {
  color: #ffffff;
}
.list-group-item-action.active:hover {
  color: #ffffff;
}
</style>
